import { useState } from 'react'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN'
import CharacterSearch from './components/CharacterSearch'
import CharacterDetail from './components/CharacterDetail'
import ConversationPanel from './components/ConversationPanel'
import { Character } from './types'
import './App.css'

function App() {
  const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(null)
  const [showConversation, setShowConversation] = useState<boolean>(false)

  // 选择角色处理函数
  const handleCharacterSelect = (character: Character) => {
    setSelectedCharacter(character)
    setShowConversation(false)
  }

  // 开始对话处理函数
  const handleStartConversation = () => {
    setShowConversation(true)
  }

  // 返回搜索页面处理函数
  const handleBackToSearch = () => {
    setSelectedCharacter(null)
    setShowConversation(false)
  }

  // 返回角色详情页面处理函数
  const handleBackToDetail = () => {
    setShowConversation(false)
  }

  return (
    <ConfigProvider locale={zhCN}>
      <div className="app-container">
        {!selectedCharacter && !showConversation && (
          <CharacterSearch onCharacterSelect={handleCharacterSelect} />
        )}
        
        {selectedCharacter && !showConversation && (
          <CharacterDetail 
            character={selectedCharacter} 
            onStartConversation={handleStartConversation} 
            onBack={handleBackToSearch} 
          />
        )}
        
        {selectedCharacter && showConversation && (
          <ConversationPanel 
            character={selectedCharacter} 
            onBack={handleBackToDetail} 
          />
        )}
      </div>
    </ConfigProvider>
  )
}

export default App
